<template>
  <div>
    <SearchBar :options="options" @change="searchChange" />
    <el-table :data="list" :loading="loading" class="mt20">
      <el-table-column label="房间" prop="chamberName"></el-table-column>
      <el-table-column label="合约周期" prop="dateRange"></el-table-column>
      <el-table-column label="分组" prop="grouphName"></el-table-column>
      <el-table-column label="已付" prop="collectionCount"></el-table-column>
      <el-table-column label="已收金额" prop="collectionMoney"></el-table-column>
      <el-table-column label="待付" prop="toCollectionCount"></el-table-column>
      <el-table-column label="待付金额" prop="toCollectionMoney"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <Landlord :visible="lodgingDetailVisible" @cancel="() => lodgingDetailVisible = false" />
  </div>
</template>
<script setup name="RoomSummaryPane">
import SearchBar from '../component/searchBar.vue'
import Landlord from '@/views/room/component/lodgingDetail/landlord.vue'
import LodgingBlock from './lodgingBlock.vue'

const options = ref({
  group: true,
  subType: true,
  searchStr: true,
})
const lodgingDetailVisible = ref(false)
const list = ref([])
const loading = ref(false)
const total = ref(0)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
})
const { queryParams } = toRefs(data)

/* 搜索栏变化 */
function searchChange(form) {
  queryParams.value = { ...form, ...queryParams.value }
  getList()
}

function handleDetail() {
  lodgingDetailVisible.value = true
}

function getList() {
  loading.value = true
  setTimeout(() => {
    console.log('sss');
    list.value = [{
      chamberName: '朝露晨曦A101',
      dateRange: '2024-03-21 ~ 2024-06-20',
      checkInDate: '2024-03-21',
      checkoutDate: '2024-06-20',
      grouphName: '县城片区',
      collectionCount: '3笔',
      collectionMoney: '+1220元',
      toCollectionCount: '10笔',
      toCollectionMoney: '+5500元'
    }, {
      chamberName: '朝露晨曦A101',
      dateRange: '2024-03-21 ~ 2024-06-20',
      checkInDate: '2024-03-21',
      checkoutDate: '2024-06-20',
      grouphName: '县城片区',
      collectionCount: '3笔',
      collectionMoney: '+1220元',
      toCollectionCount: '10笔',
      toCollectionMoney: '+5500元'
    }]
    loading.value = false
    total.value = 2
  }, 500);
}
getList()
</script>